<template>
	<view class="page_bg">
		<u-navbar title="邀请推广" titleStyle="color:#333;" :placeholder="false" leftIconColor="#333" :autoBack="true"
			bgColor="rgba(0,0,0,0)">

		</u-navbar>

		<view class="invite_ad">
			<image class="ph" :src="settingData.invite_bg" mode="aspectFill"></image>
		</view>

		<view class="bg_radius">
			<view class="invite_info">
				<view class="item">
					<view class="name">
						累计邀请用户
					</view>
					<view class="num">
						{{infoData.count||0}}
					</view>
				</view>
				<view class="item">
					<view class="name">
						开通会员用户
					</view>
					<view class="num">
						{{infoData.tk_vip_num||0}}
					</view>
				</view>
				<view class="item">
					<view class="name">
						邀请累计氪气
					</view>
					<view class="num">
						{{infoData.tk_amount||0}}
					</view>
				</view>
			</view>

			<view class="invite_list">
				<view class="title">
					全部成员（共 {{infoData.count||0}} 人）
				</view>

				<view v-if="listData.length == 0" class="list_none">
					<image class="img" src="../static/img/ico_none.png" mode="widthFix"></image>
					<view class="text">暂无邀请的成员</view>
				</view>
				<view v-else class="list">
					<view class="item" v-for="(item,index) in listData" :key="index">
						<image class="ph" :src="item.user_img" mode="aspectFill"></image>
						<view class="info">
							<view class="name">
								{{item.user_name}} <image v-if="item.tk_vip == 1" class="vip_img" src="../static/img/vip_logo.png" mode="widthFix"></image>
							</view>
							<view class="status">
								注册时间：{{item.add_date}}
							</view>
							
						</view>
						<view class="keqi">
							{{item.tk_invite_amount}}氪气
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="footer_none"></view>
		<view class="footer_yellow_btn">
			<view class="btn" @click="showCode = true">
				去分享邀请
			</view>
		</view>
		
		<!-- 二维码 -->
		<u-popup :show="showCode" mode="center" bgColor="transparent" overlayOpacity="0.7" @close="closeCode"
			@open="openCode">
			<view class="share_code">
				<view class="info">
					<image class="ph" :src="codeImg" mode="widthFix"></image>
				</view>
				<view class="btn" @click="downCodeImg">
					下载您的专属邀请码
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				infoData: {},
				listData: [],
				userId: '',
				showCode: false,
				codeImg: '',
				settingData:{}
			}
		},
		onLoad() {
			this.userId = uni.getStorageSync('userId');
			console.log('userId----', this.userId)
			this.getInviteUsers()
			this.getWechatAcode()
			this.getVipSettings()
		},
		methods: {
			//系统配置接口
			getVipSettings() {
				uni.$u.http.get('/api/vip_settings?from=miniprogram').then(res => {
					console.log('系统配置接口----', res.data.data)
					this.settingData = res.data.data
				}).catch(err => {
					console.log(err)
				})
			},
			// 保存图片
			downCodeImg() {
				const that = this
				uni.downloadFile({
					url: that.codeImg, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功');
							const tempFilePath = res.tempFilePath;
							// 2. 将图片保存到相册
							uni.saveImageToPhotosAlbum({
								filePath: tempFilePath,
								success: () => {
									uni.showToast({
										title: '图片已保存到相册',
										icon: 'none'
									});
								},
								fail: (err) => {
									uni.showToast({
										title: '保存失败',
										icon: 'none'
									});
									console.error('保存失败:', err);
								}
							});
						}
						console.log('下载成功', res);
					}
				});
			},
			getWechatAcode() {
				uni.$u.http.get('/api/wechat_acode_unlimited/' + this.userId + '?from=miniprogram&bid=888&refresh=0').then(res => {
					console.log('获取推广二维码链接----', res.data)
					this.codeImg = res.data.data
				}).catch(err => {
					console.log(err)
				})
			},
			getInviteUsers() {
				uni.$u.http.get('/api/invite_users/' + this.userId + '?from=miniprogram').then(res => {
					console.log('邀请用户列表----', res.data.data)
					this.infoData = res.data.data
					if(res.data.data.users){
						this.listData = res.data.data.users
					}
					
				}).catch(err => {
					console.log(err)
				})
			},
			openCode() {
				// console.log('open');
			},
			closeCode() {
				this.showCode = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.share_code {
		.info {
			width: 590rpx;
			border-radius: 20rpx;
			background: #505050;
			padding: 45rpx;
			box-sizing: border-box;

			.ph {
				width: 100%;
				border-radius: 20rpx;
			}
		}

		.btn {
			width: 590rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 45rpx;
			background: #FFB200;
			font-size: 32rpx;
			color: #000000;
			text-align: center;
			margin-top: 30rpx;
		}
	}

	.page_bg {
		background: #000;
		min-height: 100vh;
	}

	.list_none {
		text-align: center;
		padding: 100rpx 0 160rpx;

		.img {
			display: block;
			width: 360rpx;
			margin: 0 auto;
		}

		.text {
			display: block;
			font-size: 24rpx;
			line-height: 36rpx;
			text-align: justify;
			color: #A6A6A6;
			text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2613);
			text-align: center;
			padding: 40rpx 0 0;
		}
	}

	.invite_list {
		background: #1F1F1F;
		border-radius: 15rpx;
		padding: 30rpx 30rpx;

		.list {
			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 0;
				
				.ph {
					flex-shrink: 0;
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-right: 25rpx;
				}

				.info {
					width: 100%;

					.name {
						font-size: 26rpx;
						font-weight: 500;
						line-height: 38rpx;
						color: #FFFFFF;
					}
					.vip_img{
						width: 60rpx;
						height: 40rpx;
						margin-left: 10rpx;
					}

					.status {
						padding: 8rpx 0;
						font-size: 22rpx;
						font-weight: normal;
						line-height: 32rpx;
						color: #8E8E8E;
					}
				}

				.keqi {
					flex-shrink: 0;
					font-size: 30rpx;
					font-weight: 600;
					line-height: 52rpx;
					color: #F1B31E;
					margin-left: 20rpx;
				}
			}
		}

		.title {
			font-size: 26rpx;
			font-weight: 600;
			line-height: 40rpx;
			color: #FFFFFF;
		}
	}

	.invite_info {
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		padding: 30rpx 0;

		.item {
			width: 210rpx;
			height: 170rpx;
			border-radius: 15rpx;
			background: #1F1F1F;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.name {
				font-size: 26rpx;
				line-height: 40rpx;
				text-align: justify;
				color: #8C8C8C;
			}

			.num {
				font-size: 36rpx;
				font-weight: 600;
				line-height: 54rpx;
				text-align: justify;
				color: #FFFFFF;
				margin-top: 20rpx;
			}
		}
	}

	.invite_ad {
		width: 100%;
		height: 484rpx;

		.ph {
			display: block;
			width: 100%;
			height: 484rpx;
		}
	}

	.bg_radius {
		position: relative;
		z-index: 9;
		margin-top: -20rpx;
		border-radius: 20rpx;
		background: #000;
		padding: 0 30rpx;
	}

	.footer_none {
		width: 100%;
		height: 200rpx;
	}

	.footer_yellow_btn {
		position: fixed;
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		z-index: 99;
		background: #1F1F1F;
		padding: 30rpx 46rpx 60rpx;

		.btn {
			height: 76rpx;
			border-radius: 35rpx;
			background: #F9BE01;
			line-height: 76rpx;
			text-align: center;
			font-size: 30rpx;
			color: #292D32;
			font-weight: 600;
		}
	}
</style>